 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      text-decoration: none;/*无下划线*/
      font-size: 24px;
      color: #333334;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }

    .box-card {
      width: 480px;
    }
    .input_login{
      margin-top: 5px;
      margin-bottom: 5px
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{


    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="150px"style="width: 1200px;margin: 0 auto">
        <!--导航开始-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" style="font-size: 24px"><a href="index.html" >首页</a></el-menu-item>
            <el-menu-item index="2" style="font-size: 24px"><a href="homepage.html" >个人主页</a></el-menu-item>
            <el-menu-item index="3" style="font-size: 24px"><a href="shopping%20cart.html" >购物车</a></el-menu-item>
            <el-menu-item index="4" style="font-size: 24px"><a href="user%20control.html" >用户管理</a></el-menu-item>
            <!--登录注册靠右边-->
            <el-menu-item index="6" style="float: right"><a href="login.html" >注册</a></el-menu-item>
            <el-menu-item index="5" style="float: right"><a href="login.html">登录</a></el-menu-item>

        </el-menu>
        <!--导航结束-->
        <div class="line"></div><!--不明白用处的-->

    </el-header>
    <el-main >
        <!--卡片-->
      <el-card class="box-card" style="width: 340px; height: 450px;margin: 0 auto">
        <div slot="header" class="clearfix" >
          <p style="text-align: center;font-size: 25px;margin-top: 5px;margin-bottom: 5px" >欢迎注册</p>
         <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>
        <div class="demo-input-suffix">
          <el-input
                  placeholder="请输入手机号"
                  suffix-icon="el-icon-mobile-phone"
                  v-model="input1"  class="input_login">
          </el-input>
          <el-input
                  placeholder="请输入用户名"
                  v-model="user.username" class="input_login">
          </el-input>
        </div>
        <div class="demo-input-suffix">
          <el-input
                  placeholder="请输入密码"
                  v-model="user.password"  class="input_login" show-password>
            <i slot="suffix" class="el-input__icon el-icon-lock"></i>
          </el-input>
            <!--下拉-->
            <template>
                <el-select v-model="value" placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
          <template>
            <!--单选框-->
            <el-checkbox v-model="checked" >
                我已阅读并同意  <el-button type="text" @click="dialogVisible = true">注册协议</el-button>
            </el-checkbox>
            <!--提示注册协议-->
            <el-dialog
                    title="注册协议"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
              <span>暂无注册协议，就是随便的</span>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">拒 绝</el-button>
                
    <el-button type="primary" @click="dialogVisible = false">接 受</el-button>
  </span>
            </el-dialog>
          </template>
          <el-row style="text-align: center">
            <el-button type="primary" style="margin-top: 20px;margin-bottom: 0px" @click="reg()">注册</el-button>
          </el-row>

        </div>
      </el-card>

    </el-main>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data() {
      return {
          user:{username:"",password:""},
          options: [{
              value: '选项1',
              label: '设计市'
          }, {
              value: '选项2',
              label: '程序源'
          }, {
              value: '选项3',
              label: '前端'
          }],
        input1: '',
        input4: '',
        radio: '1',
        dialogVisible: false,
        activeIndex: '6',
        checked: false,
          value: ''
      }
    },
    methods:{
        reg(){
            axios.post("/reg",v.user).then(function (response) {
                if (response.data==1){
                    alert("注册成功!");
                    location.href = "/";
                }else{
                    alert("用户名已存在!");
                }
            })
        },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
  })
</script>
</html>